<template>
    <div class="radio-home-box app-container" style="overflow-y:hidden">
        <div class="radio-home-map">
            <div>
                <!-- <a-map :getMapList="stationAll" class="map-canvas" style="width: 100%; height: calc(100vh - 110px)" @openDetail="openDetail"></a-map> -->
                <sw-map ref="map" class="map-canvas" style="width: 100%; height: calc(100vh - 110px)"
                    @clickMaker="clickMaker" :pageList="stationAll" @rightClick="openDetailsDialog"></sw-map>
            </div>
            <div class="map-menu">
                <el-popover placement="left-start" width="160" v-model="guild.visible" class="tz-popover"
                    :visible-arrow="false" popper-class="pb-box">
                    <div class="popover-suspend pb1" style="width: 623px;left: -450px;height: auto">
                        <guild-page :deviceList="guild.deviceList" @closeDialog="closeGuild"
                            @change="guildChange"></guild-page>
                    </div>
                    <template #reference>
                        <div class="popover-button pb1" style="height: 120px;">
                            <div> <img class="popover-icon" src="@/assets/img/guild.png" /></div>
                            <div class="popover-text">行业服务</div>
                        </div>
                    </template>
                </el-popover>
                <el-popover placement="left-start" width="160" v-model="camera.visible" class="tz-popover"
                    :visible-arrow="false" popper-class="pb-box">
                    <div class="popover-suspend pb1">
                    </div>
                    <template #reference>
                        <div class="popover-button pb1">
                            <div> <img class="popover-icon" src="@/assets/img/right.png" /></div>
                            <!-- <div> <img class="popover-icon" src="@/assets/img/micon.png" /></div>
                            <div><img class="popover-icon" src="@/assets/img/camera.png" /></div> -->
                            <div class="popover-text">监控传感器列表</div>
                        </div>
                    </template>
                </el-popover>
                <el-popover placement="left-start" width="160" v-model="base.visible" class="tz-popover"
                    :visible-arrow="false" popper-class="pb-box">
                    <div class="popover-suspend pb2">
                        <div class="flex ">
                            <div v-for="item in base.list" class="flex">
                                <div>
                                    <progress-bar :size="85" :strokeWidth="15" :percentage="item.percentage"
                                        :color="item.color" :text="item.name" style="margin: 15px 8px;"></progress-bar>
                                </div>
                            </div>
                        </div>
                    </div>
                    <template #reference>
                        <div class="popover-button pb2">
                            <div> <img class="popover-icon" src="@/assets/img/right.png" /></div>
                            <div class="popover-text" @click="saveData">基地列表</div>
                        </div>
                    </template>
                </el-popover>
                <el-popover placement="left-start" width="160" v-model="search.visible" class="tz-popover"
                    :visible-arrow="false" popper-class="pb-box">
                    <div class="popover-suspend pb3">
                        <div class="pb3-search"><input placeholder="输入电台ID/电台名称/地点" /><img
                                src="@/assets/img/search.png" />
                        </div>

                    </div>
                    <template #reference>
                        <div class="popover-button pb3">
                            <div> <img class="popover-icon" src="@/assets/img/right.png" /></div>
                            <div class="popover-text">搜索</div>
                        </div>
                    </template>
                </el-popover>
                <el-popover placement="left-start" width="160" v-model="station.visible" class="tz-popover"
                    :visible-arrow="false" popper-class="pb-box">
                    <div class="popover-suspend pb4">

                        <min-table :tableData="station.tableData"></min-table>
                    </div>
                    <template #reference>
                        <div class="popover-button pb4">
                            <div> <img class="popover-icon" src="@/assets/img/right.png" /></div>
                            <div> <img class="popover-icon" src="@/assets/img/micon.png" @click="openList"
                                    @click.stop.prevent /></div>
                            <div class="popover-text">电台列表</div>
                        </div>
                    </template>
                </el-popover>
            </div>
        </div>

        <full :title="station.full.title" :visible="station.full.visible" @closeDialog="closeDialog">
            <template v-slot:default>
                <div class="radio-full">
                    <div class="flex radio-full-query">
                        <div class="flex flex-left">
                            <!-- <el-input class="zt-input" v-model="station.queryParams.name" placeholder="电台名称" /> -->

                            <el-input class="zt-input" v-model="station.queryParams.radioStationName"
                                placeholder="电台名称" />

                            <el-button class="bt-blue" style="margin-left: 20px; " @click="handleQuery">查询</el-button>
                        </div>
                        <el-button class="bt-yellow flex-right" @click="handleAdd">新添</el-button>
                    </div>

                    <div class="tz-table-box no-bg-talbe" style="height:calc(100vh - 290px);">
                        <el-table :data="station.tableData" height="calc(100vh - 250px)" class="zt-table"
                            v-loading="loading" :empty-text="'暂无数据'">
                            <el-table-column label="id" align="center" prop="radioStationId" />

                            <el-table-column label="电台名称" align="center" prop="radioStationName" />
                            <el-table-column label="电台GPS" align="center" prop="radioStationGps" />
                            <el-table-column label="地址" align="center" prop="address" />
                            <el-table-column label="状态" align="center" prop="isNet">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.isNet == 0" class="red">离线</div>
                                    <div v-if="scope.row.isNet != 0">在线</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="执行任务" align="center" prop="radioStationGps" />
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                    <img src="@/assets/images/amend.png" class="icon-img"
                                        @click="handleUpdate(scope.row)" />
                                    <img src="@/assets/images/delete-bin2.png" class="icon-img"
                                        @click="handleDelete(scope.row)" />
                                    <img src="@/assets/images/xs.png" @click="handleDetails(scope.row)"
                                        class="icon-img" />
                                    <img src="@/assets/images/st.png"
                                        style="width: 20px;height: 20px;cursor: pointer;" />
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>

                    <pagination v-show="total > 0" :total="total" :page.sync="station.queryParams.pageNum"
                        :limit.sync="station.queryParams.pageSize" @pagination="getList" />

                </div>

            </template>
        </full>

        <right-dialog :title="station.title" :visible="station.open" @closeDialog="cancel">
            <template v-slot:default>
                <div class="zt-dialog-solt">
                    <el-form ref="form" :model="station.form" label-width="120px">
                        <el-form-item label="类型:">
                            <div class="flex">
                                <el-select v-model="station.form.radioStationType" filterable placeholder="类型"
                                    @change="changeType" class="zt-input-min rihgt-m5"
                                    style="width: 120px;font-weight: 600;">
                                    <el-option v-for="item in  dict.type.radio_station_type" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                                <!-- <div style=";margin-right: 5px; width: 90px; text-align: right;">所属地:</div> -->
                                <el-form-item label="所属地:">
                                    <el-select v-model="station.form.locatedAddress" filterable placeholder="所属地"
                                        @change="changeLocatedAddress" class="zt-input-min rihgt-m5"
                                        style="width: 120px;font-weight: 600;">
                                        <el-option v-for="item in  dict.type.located_address" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="天线:" v-show="station.form.locatedAddress">


                                    <el-select v-model="station.form.antennaId" :popper-append-to-body="false"
                                        placeholder="请选择" :popper-class="'t-select'" class="zt-input-min rihgt-m5"
                                        filterable style="width: 90%;">
                                        <el-option-group v-for="group in antennaListAll" :key="group.label"
                                            :label="group.label">
                                            <el-option v-for="item in group.options" :key="item.antennaId"
                                                :label="item.antennaName" :value="item.antennaId">
                                            </el-option>
                                        </el-option-group>
                                    </el-select>

                                    <!-- <el-select v-model="form.antennaId" filterable placeholder="天线"
                                        class="zt-input-min rihgt-m5" style="width: 120px;font-weight: 600;">
                                        <el-option v-for="item in  antennaListAll" :key="item.antennaId"
                                            :label="item.antennaName" :value="item.antennaId" />
                                    </el-select> -->
                                </el-form-item>


                            </div>
                        </el-form-item>

                        <el-form-item label="硬件版本号:">
                            <div class="flex">
                                <el-input class="zt-input-min" style="width: 120px;"
                                    v-model="station.form.hardwareVersion" placeholder="版本号" />
                                <div
                                    style="margin-right: 5px; width: 80px; text-align: right;font-weight: 600;margin-left: 30px;">
                                    软件版本号:
                                </div>
                                <el-input class="zt-input-min" style="width: 120px;"
                                    v-model="station.form.softwareVersion" placeholder="版本号" />

                                <div style="margin-right: 5px; width: 90px; text-align: right;">入网状态:
                                </div>
                                <el-select v-model="station.form.isNet" filterable placeholder="入网状态"
                                    :disabled="station.isNet == 1" class="zt-input-min rihgt-m5">
                                    <el-option key="0" label="未入网" value="0" />
                                    <el-option key="1" label="已入网" value="1" />
                                </el-select>
                            </div>

                        </el-form-item>

                        <el-form-item label="电台名称:">
                            <div class="flex">
                                <el-input class="zt-input" v-model="station.form.radioStationName" placeholder="电台名称" />
                                <el-button class="bt-blue " @click="submitForm"
                                    style="margin-left: 50px; ">确定</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-model="station.form.remark" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                    </el-form>

                </div>
            </template>
        </right-dialog>


        <!-- 详情 -->
        <right-dialog title="电台详情" :visible="openDetails" @closeDialog="closeDetails">
            <template v-slot:default>
                <!-- 详情组件 -->
                <deviceDetails v-if="openDetails" :detailRow="detailRow" @close="closeDetails"></deviceDetails>
            </template>
        </right-dialog>

    </div>
</template>

<script>
import ProgressBar from '@/components/TZ/ProgressBar/index.vue';
import MinTable from '@/components/TZ/MinTable/index.vue';
import Full from '@/components/TZ/Full/index.vue';
import { listStation, getStation, delStation, addStation, updateStation, getRadioStationList } from "@/api/business/station";
import { getAntennaListAll } from "@/api/business/antenna";
import RightDialog from "@/components/TZ/RightDialog"
// import Map from "@/components/TZ/Map"
import PopUp from "@/components/TZ/PopUp"
import AMap from "@/components/TZ/AMap"
import SwMap from "@/components/TZ/SwMap"
import GuildPage from '../components/guildPage.vue';
import deviceDetails from '../components/deviceDetails.vue';




export default {
    name: "RadioHome",
    dicts: ['radio_station_type', 'located_address'],
    components: { ProgressBar, MinTable, Full, RightDialog, PopUp, AMap, SwMap, GuildPage, deviceDetails },
    data() {
        return {
            camera: {
                visible: false,
            },
            base: {
                visible: false,
                list: [
                    { name: "山东基地", color: "#2BA0C8", percentage: 70 },
                    { name: "重庆基地", color: "#CD6868", percentage: 40 },
                    { name: "新疆基地", color: "#CD6868", percentage: 60 },
                    { name: "海南基地", color: "#CD6868", percentage: 20 },
                ]
            },
            search: {
                visible: false,
            },
            // 行业服务
            guild: {
                visible: false,
                deviceList: []
            },
            // 详情弹窗
            openDetails: false,
            // 查看详情的对象
            detailRow: {},
            total: 1000,
            station: {
                isNet: null,
                tableData: [
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 0 },
                    { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 2 },
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '实时传输', state: 3 },
                    { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 2 },
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 0 },
                    { id: 'f001', name: '重庆渝北001', pattern: '实时传输', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 3 },
                    { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 3 },
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 0 },
                    { id: 'f002', name: '重庆渝北001', pattern: '实时传输', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 0 },
                    { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 2 },
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '实时传输', state: 3 },
                    { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 2 },
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 0 },
                    { id: 'f001', name: '重庆渝北001', pattern: '实时传输', state: 1 },
                    { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 3 },
                    { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 3 },
                    { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 0 },
                    { id: 'f002', name: '重庆渝北001', pattern: '实时传输', state: 1 },
                ],
                visible: false,
                full: {
                    visible: false,
                },
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    radioStationName: null,
                },
                open: false,
                form: null,
                title: null,
            },
            antennaListAll: [//天线集合
                { label: '已使用', options: [] },
                { label: '未使用', options: [] },
            ],
            loading: false,
            stationAll: [],

        }
    },
    created() {
        this.getList();
        this.reset();
        this.getRadioStationAll();
        this.getData()
    },
    mounted() {
    },

    methods: {
        // 打开详情
        openDetailsDialog(row) {
            this.detailRow = row;
            this.openDetails = true;
        },
        // 关闭详情
        closeDetails() {
            this.openDetails = false;
            this.detailRow = {};
        },
        // 关闭行业服务
        closeGuild() {
            this.guild.visible = false;
        },
        // 值变化事件
        guildChange(list) {
            this.$refs.map.showMaker(list);
            this.guild.deviceList = list;
        },
        // 点击了maker
        clickMaker(maker, checked) {
            const item = maker.getProperties();
            if (checked) {
                if (!this.guild.deviceList.includes(item.radioStationCode)) {
                    this.guild.deviceList.push(item.radioStationCode)
                }
            } else {
                let index = this.guild.deviceList.indexOf(item.radioStationCode)
                this.guild.deviceList.splice(index, 1)
            }
        },

        saveData() {
            localStorage.setItem('frequencyRadioCode', "111111");
        },
        getData() {
            const id = localStorage.getItem('frequencyRadioCode') || null;

        },

        openDetail(val) {
            console.log(val);
        },
        /** 查询电台列表 */
        getList() {
            this.loading = true;
            listStation(this.station.queryParams).then(response => {
                this.station.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        getRadioStationAll() {
            const data = {
                // isUsed: 0,
            }
            getRadioStationList(data).then(response => {
                this.stationAll = response.rows.map(item => {
                    let gps = [0, 0];
                    try {
                        gps = item.radioStationGps.split("|");
                    } catch (e) { }
                    return {
                        ...item,
                        x: Number(gps[0]),
                        y: Number(gps[1])
                    }
                });
            });
        },
        getListAll(index) {//查询数据集合 
            this.resetListAll();
            const data = {
                locatedAddress: index,
                isUsed: 0,
            }
            getAntennaListAll(data).then(response => {
                this.antennaListAll[1].options = response.rows;
                console.log(this.antennaListAll[1].options);
            });
        },
        resetListAll() {
            this.antennaListAll = [//天线集合
                { label: '已使用', options: [] },
                { label: '未使用', options: [] },
            ]
        },
        openList() {
            this.station.full.visible = true;
            this.station.full.title = '电台列表';
        },
        closeDialog() {
            this.station.full.visible = false;
        },
        /** 新增电台按钮操作 */
        handleAdd() {
            this.reset();
            this.station.open = true;
            this.station.title = "添加电台";
        },
        /** 修改按钮操作 */
        handleUpdate(row, details) {
            this.reset();
            const radioStationId = row.radioStationId
            getStation(radioStationId).then(response => {
                this.station.form = response.data;
                this.open = true;
                this.station.isNet = this.station.form.isNet;
                this.station.open = true;
                if (details) {
                    this.station.title = "电台详情";
                } else {
                    this.station.title = "修改电台";
                }

                if (this.station.form.locatedAddress) {
                    this.getListAll(this.station.form.locatedAddress);
                    this.getAntennaUsed();
                    // this.transitionList();
                }

            });
        },
        getAntennaUsed() {
            this.antennaListAll[0].options = [];
            for (let i = 0; i < this.station.form.pltAntennaList.length; i++) {
                if (this.station.form.pltAntennaList[i].isUsed * 1 == 1) {
                    const data = {
                        antennaId: this.station.form.pltAntennaList[i].antennaId,
                        isUsed: 0,
                        antennaName: this.station.form.pltAntennaList[i].antennaName,
                    }
                    this.antennaListAll[0].options.push(data)
                    console.log(this.antennaListAll[0]);
                    this.$set(this.station.form, 'antennaId', this.station.form.pltAntennaList[i].antennaId);
                }
            }

        },
        // 取消按钮
        cancel() {
            this.station.open = false;
            // this.station.openDetails = false;
            this.reset();
        },
        //提交前将传感器转换
        setPltAntennaList() {
            let data = []
            if (this.antennaListAll[0].options.length >= 1) data.push(this.antennaListAll[0].options[0])
            if (this.station.form.antennaId) data.push({ antennaId: this.station.form.antennaId, isUsed: 1 })
            this.$set(this.station.form, 'pltAntennaList', data);
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const radioStationIds = row.radioStationId;
            this.$modal.confirm('是否确认删除电台编号为"' + radioStationIds + '"的数据项？').then(function () {
                return delStation(radioStationIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.setPltAntennaList();
                    if (this.station.form.radioStationId != null) {
                        updateStation(this.station.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.station.open = false;
                            this.getList();
                        });
                    } else {
                        addStation(this.station.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.station.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        changeType(index) {
            this.station.form.radioStationName = this.getLocatedAddress(this.station.form.locatedAddress) + this.getRadioStationType(index)
        },
        getRadioStationType(index) {
            const entries = this.dict.type.radio_station_type;
            for (let i = 0; i < entries.length; i++) {
                if (entries[i].value == index) {
                    return entries[i].label
                }
            }
            return ""
        },
        getLocatedAddress(index) {
            const entries = this.dict.type.located_address;
            for (let i = 0; i < entries.length; i++) {
                if (entries[i].value == index) {
                    return entries[i].label
                }
            }
            return ""
        },
        changeLocatedAddress(index) {
            this.station.form.antennaId = []
            this.getListAll(index);
        },
        handleQuery() {
            this.station.queryParams.pageNum = 1;
            this.getList();
        },
        // 表单重置
        reset() {
            this.station.form = {
                radioStationId: null,
                radioStationCode: null,
                radioStationName: null,
                radioStationType: null,
                carryType: null,
                locatedAddress: null,
                unit: null,
                address: null,
                antennaId: null,
                softwareVersion: null,
                hardwareVersion: null,
                radioStationGps: null,
                isUsed: null,
                isNet: null,
                status: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null,
                pltAntennaList: null,
            };
            // this.resetForm("form");
        },
    }

};
</script>
<style scoped>
.radio-home-map {
    /* width: calc(100% - 60px);
    margin: 15px; */
    height: calc(100vh - 110px);
    background-color: white;
    position: relative;

}

/deep/.el-textarea__inner {
    background-color: #394760 !important;
    border: none !important;
    color: white !important;
}
</style>